<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap4 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="random-line2.css">
    <style>
        body {
            position: relative;
        }
        #btn,
        #card,
        #form {
            height: 920px;
            padding-left:100px; 
            border-bottom: 1px solid pink;
        }
        button{
            position: relative;
            z-index: 100;
            outline:0 none !important; 
            border: none;
        }
        input,button,a { 
            outline-style: none!important;  
            user-select: none;
        } 
        input{
            position: relative;
        }
        :focus{
            border: 0 none;
            outline-style: none!important; 
            user-select: none; 
        }
        .card .card-body{
            z-index: 1;
        }
        .card .card-body a,.card .card-body a:hover{
            color: #fff;
        }
    </style>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#btn">绘制按钮</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#card">绘制卡片</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#form">绘制表单</a>
            </li>
        </ul>
    </nav>
    <div id="btn" style="padding-top:70px;">
        <h1>按钮</h1>
        <span class="position-relative">
            <button type="button" class="btn">Primary</button>
            <canvas id="btn-primary" width="80" height="38"></canvas>
        </span>
        <span class="position-relative">
            <button type="button" class="btn">primary</button>
            <canvas id="btn-secondary" width="80" height="38"></canvas>
        </span>
        <span class="position-relative">
            <button type="button" class="btn">primary</button>
            <canvas id="btn-success" width="80" height="38"></canvas>
        </span>
        <span class="position-relative">
            <button type="button" class="btn">danger</button>
            <canvas id="btn-danger" width="80" height="38"></canvas>
        </span>
    </div>
    <div id="card" style="padding-top:70px;">
        <div class="card" style="width: 18rem;border: none;">
            <div class="card-body position-relative">
                <h5 class="card-title">Card1</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                <a class="btn btn-primary">Go somewhere</a>
            </div>
            <canvas id="card1"></canvas>
        </div>
        <div class="card" style="width: 18rem;border: none;">
            <div class="card-body position-relative">
                <h5 class="card-title">Card2</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                <a class="btn btn-primary">Go somewhere</a>
            </div>
            <canvas id="card2"></canvas>
        </div>
        <div class="card" style="width: 18rem;border: none;">
            <div class="card-body position-relative">
                <h5 class="card-title">Card3</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                <a class="btn btn-primary">Go somewhere</a>
            </div>
            <canvas id="card3"></canvas>
        </div>
    </div>
    <div id="form" style="padding-top:70px;">
        <h1>表单</h1>
        <p>
            <div class="row mb-2">
                <span class="position-relative" style="height:38px;">
                    <input type="password" class="form-control" placeholder="Password">
                    <canvas id="password"></canvas>
                </span>
                <span class="position-relative" style="height:38px;margin-left: 10px;">
                    <button type="submit" class="btn mb-2">确定</button>
                    <canvas id="submit"></canvas>
                </span>
            </div>
            <div class="row mb-2">
                <span class="position-relative" style="height:38px;">
                    <canvas id="password2"></canvas>
                    <input type="password" class="form-control" placeholder="Password">
                </span>
                <span class="position-relative" style="height:38px;margin-left: 10px;">
                    <button type="submit" class="btn mb-2">确定</button>
                    <canvas id="submit2"></canvas>
                </span>
            </div>
            <div class="row">
                <span class="position-relative" style="height:38px;">
                    <canvas id="password3"></canvas>
                    <input type="password" class="form-control" placeholder="Password">
                </span>
                <span class="position-relative" style="height:38px;margin-left: 10px;">
                    <button style="outline:none;" type="submit3" class="btn mb-2">确定</button>
                    <canvas id="submit3"></canvas>
                </span>
            </div>
        </p>
    </div>
</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/roughjs/dist/rough.min.js"></script>
<script src="random-line2.js"></script>
<script>



</script>

</html>